<template>
  <!-- 顶部欢迎区域 -->
  <a-row class="mb-6">
    <a-col :span="24">
      <div class="welcome-card bg-white rounded-xl shadow-sm p-6 flex flex-col md:flex-row md:items-center md:justify-between">
        <!-- 用户头像上传区域 -->
        <div class="flex items-center gap-4 mb-4 md:mb-0">
          <a-upload
              name="file"
              :action="url + '/file/upload'"
              :show-upload-list="false"
              accept="image/*"
              :show-file-list="false"
              @success="handleAvatarUpload"
              @error="handleUploadError"
          >
            <template #upload-button>
              <a-avatar
                  :size="80"
                  class="cursor-pointer hover:shadow-md transition-all duration-300 border-2 border-transparent hover:border-blue-400"
              >
                <img
                    :src="imgUrl + avatar"
                    alt="用户头像"
                    class="object-cover rounded-full"
                >
              </a-avatar>
            </template>
          </a-upload>

          <!-- 用户欢迎信息 -->
          <div class="text-left">
            <p class="text-lg font-medium text-gray-800">您好，{{ userRole }}，今天又是充满活力的一天！</p>
            <p class="text-sm text-gray-500 mt-1">{{ currentDate }}</p>
          </div>
        </div>

        <!-- 快捷操作按钮 -->
        <div class="flex gap-3">
          <a-button type="primary" size="small" class="bg-blue-600 hover:bg-blue-700">
            <i class="fa fa-cog mr-1"></i> 系统设置
          </a-button>
          <a-button type="secondary" size="small">
            <i class="fa fa-question-circle mr-1"></i> 帮助
          </a-button>
        </div>
      </div>
    </a-col>
  </a-row>

  <!-- 后台功能说明卡片 -->
  <a-row class="mb-6">
    <a-col :span="24">
      <div class="function-card bg-white rounded-xl shadow-sm p-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
          <i class="fa fa-info-circle text-blue-500 mr-2"></i> 系统功能说明
        </h2>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <!-- 左侧功能列表 -->
          <div class="space-y-4">
            <div class="function-item f6lex items-start p-3 rounded-lg hover:bg-gray-50 transition-colors">
              <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                <i class="fa fa-graduation-cap text-blue-500"></i>
              </div>
              <div>
                <h3 class="font-medium text-gray-800">培训管理</h3>
                <p class="text-sm text-gray-600 mt-1">支持新增和管理培训活动信息，配置地点与时间，并可上传相关培训视频以供学习</p>
              </div>
            </div>

            <div class="function-item flex items-start p-3 rounded-lg hover:bg-gray-50 transition-colors">
              <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                <i class="fa fa-users text-green-500"></i>
              </div>
              <div>
                <h3 class="font-medium text-gray-800">用户管理</h3>
                <p class="text-sm text-gray-600 mt-1">用于查看平台注册用户的详细信息，并支持用户数据的导出操作</p>
              </div>
            </div>

            <div class="function-item flex items-start p-3 rounded-lg hover:bg-gray-50 transition-colors">
              <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                <i class="fa fa-calendar-check text-purple-500"></i>
              </div>
              <div>
                <h3 class="font-medium text-gray-800">报名记录</h3>
                <p class="text-sm text-gray-600 mt-1">集中展示用户参与培训或活动的报名情况，便于后续统计与分析</p>
              </div>
            </div>
          </div>

          <!-- 右侧功能列表 -->
          <div class="space-y-4">
            <div class="function-item flex items-start p-3 rounded-lg hover:bg-gray-50 transition-colors">
              <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
                <i class="fa fa-video text-yellow-500"></i>
              </div>
              <div>
                <h3 class="font-medium text-gray-800">视频列表</h3>
                <p class="text-sm text-gray-600 mt-1">用于统一管理平台内所有活动视频的上传与分类展示</p>
              </div>
            </div>

            <div class="function-item flex items-start p-3 rounded-lg hover:bg-gray-50 transition-colors">
              <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
                <i class="fa fa-cog text-red-500"></i>
              </div>
              <div>
                <h3 class="font-medium text-gray-800">系统设置</h3>
                <p class="text-sm text-gray-600 mt-1">提供对平台基础信息、轮播图及其他展示内容的配置入口</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-col>
  </a-row>

  <!-- 统计卡片区域 -->
  <a-row class="mb-6">
    <a-col :span="24">
      <div class="stats-container grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <!-- 统计卡片 1 -->
        <div class="stat-card bg-gradient-to-r from-blue-500 to-blue-700 text-white rounded-xl p-5 shadow-md transform hover:scale-105 transition-all duration-300">
          <div class="flex justify-between items-start">
            <div>
              <p class="text-sm opacity-80">今日培训</p>
              <h3 class="text-2xl font-bold mt-1">12</h3>
              <p class="text-xs mt-2 flex items-center">
                <i class="fa fa-arrow-up mr-1"></i> 较昨日 +2
              </p>
            </div>
            <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
              <i class="fa fa-calendar-day"></i>
            </div>
          </div>
        </div>

        <!-- 统计卡片 2 -->
        <div class="stat-card bg-gradient-to-r from-purple-500 to-purple-700 text-white rounded-xl p-5 shadow-md transform hover:scale-105 transition-all duration-300">
          <div class="flex justify-between items-start">
            <div>
              <p class="text-sm opacity-80">活跃用户</p>
              <h3 class="text-2xl font-bold mt-1">248</h3>
              <p class="text-xs mt-2 flex items-center">
                <i class="fa fa-arrow-up mr-1"></i> 较昨日 +12
              </p>
            </div>
            <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
              <i class="fa fa-user"></i>
            </div>
          </div>
        </div>

        <!-- 统计卡片 3 -->
        <div class="stat-card bg-gradient-to-r from-green-500 to-green-700 text-white rounded-xl p-5 shadow-md transform hover:scale-105 transition-all duration-300">
          <div class="flex justify-between items-start">
            <div>
              <p class="text-sm opacity-80">报名人数</p>
              <h3 class="text-2xl font-bold mt-1">156</h3>
              <p class="text-xs mt-2 flex items-center">
                <i class="fa fa-arrow-up mr-1"></i> 较昨日 +8
              </p>
            </div>
            <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
              <i class="fa fa-users"></i>
            </div>
          </div>
        </div>

        <!-- 统计卡片 4 -->
        <div class="stat-card bg-gradient-to-r from-yellow-500 to-yellow-700 text-white rounded-xl p-5 shadow-md transform hover:scale-105 transition-all duration-300">
          <div class="flex justify-between items-start">
            <div>
              <p class="text-sm opacity-80">视频总数</p>
              <h3 class="text-2xl font-bold mt-1">48</h3>
              <p class="text-xs mt-2 flex items-center">
                <i class="fa fa-arrow-up mr-1"></i> 较昨日 +3
              </p>
            </div>
            <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
              <i class="fa fa-video"></i>
            </div>
          </div>
        </div>
      </div>
    </a-col>
  </a-row>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { updateUser } from '../../../api/user';
import { Message } from '@arco-design/web-vue';

// 从环境变量获取API和图片URL
const url = import.meta.env.VITE_APP_API_URL;
const imgUrl = import.meta.env.VITE_APP_IMG_URL;

// 用户信息表单
const form = ref({
  id: 1,
  avatar: null
});

// 用户头像
const avatar = ref(null);

// 当前日期
const currentDate = ref('');

// 用户角色
const userRole = computed(() => {
  const loginData = JSON.parse(localStorage.getItem('loginData'));
  return loginData?.data?.role || '管理员';
});

// 格式化日期为友好的中文格式
const formatDate = () => {
  const now = new Date();
  return now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  });
};

// 处理头像上传成功
const handleAvatarUpload = (res) => {
  const { response } = res;

  if (response && response.code === 200) {
    // 更新表单数据
    form.value.avatar = response.data;

    // 调用API更新用户信息
    updateUser(form.value).then(res => {
      if (res.code === 200) {
        Message.success('头像更新成功');

        // 更新本地存储中的用户信息
        const loginData = JSON.parse(localStorage.getItem('loginData'));
        localStorage.setItem('loginData', JSON.stringify({
          data: {
            ...loginData.data,
            avatar: response.data
          }
        }));

        // 更新响应式变量
        avatar.value = response.data;
      } else {
        Message.error('头像更新失败');
      }
    }).catch(error => {
      console.error('头像更新错误:', error);
      Message.error('头像更新失败，请稍后重试');
    });
  } else {
    Message.error('头像上传失败');
  }
};

// 处理上传错误
const handleUploadError = (error) => {
  console.error('上传错误:', error);
  Message.error('头像上传失败，请检查网络连接');
};

// 组件挂载后初始化
onMounted(() => {
  // 获取用户头像
  try {
    const loginData = JSON.parse(localStorage.getItem('loginData'));
    avatar.value = loginData?.data?.avatar || 'default-avatar.png';
  } catch (error) {
    console.error('获取用户信息失败:', error);
    avatar.value = 'default-avatar.png';
  }

  // 设置当前日期
  currentDate.value = formatDate();
});
</script>

<style scoped>
/* 欢迎卡片样式 */
.welcome-card {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.welcome-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 功能卡片样式 */
.function-card {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.function-item {
  transition: all 0.2s ease;
}

/* 统计卡片样式 */
.stat-card {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 全局字体样式 */
* {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
</style>
